<template>
	<view class="main">
		<view class="noticeImg">
			<image :src="noticeInfo.picurl" mode="aspectFill"></image>
		</view>

		<view class="noticeTitle">{{ noticeInfo.title }}</view>

		<view class="noticeInfo">
			{{ noticeInfo.info }}
		</view>

		<view class="noticeDate">
			<view class="read_likeBox">
				<u-tag :text="`阅读 ${noticeInfo.read}`" type="success" size="mini" icon="eye" plain></u-tag>
				<u-tag :text="`点赞 ${noticeInfo.like}`" type="primary" size="mini" icon="thumb-up" plain></u-tag>
			</view>
			<uni-dateformat class="dateBox" :date="noticeInfo.date" format="yyyy年MM月dd日"></uni-dateformat>
		</view>

		<view class="likeBox">
			<u-icon class="iconAnimation" :class="{ bounce: like.isBounce }" :name="like.name" :color="like.color" size="42" @click="getLike(like)"></u-icon>
			<view class="text">
				{{ like.text }}
			</view>
		</view>
	</view>
</template>

<script>
import { toRaw } from 'vue';
export default {
	data() {
		return {
			noticeInfo: {},
			like: {
				name: 'thumb-up',
				color: '#2979ff',
				isBounce: false,
				text: '点赞'
			},
			time: ''
		};
	},
	onLoad() {
		uni.$once('notice', (data) => {
			this.noticeInfo = data;
			this.getNoticeDetails();
			this.updateNoticeRead();
		});
	},
	methods: {
		getLike(like) {
			if (this.time !== '') {
				uni.showToast({
					title: '过一会再点吧!',
					icon: 'none'
				});
				return;
			}
			this.time = setTimeout(() => {
				clearTimeout(this.time);
				this.time = '';
			}, 3000);

			if (like.name === 'thumb-up') {
				like.name = 'thumb-up-fill';
				like.color = '#f3a73f';
				like.isBounce = true;
				like.text = '已赞';
				this.updateNoticeLike(1, this.noticeInfo._id);
			} else {
				like.name = 'thumb-up';
				like.color = '#2979ff';
				like.isBounce = false;
				like.text = '点赞';
				this.updateNoticeLike(-1, this.noticeInfo._id);
			}
		},
		// 更新公告点赞数量
		updateNoticeLike(num, id) {
			uniCloud.callFunction({
				name: 'update_notice_like',
				data: {
					num,
					id
				}
			});
		},
		// 自动更新公告阅读数量
		updateNoticeRead() {
			uniCloud.callFunction({
				name: 'update_notice_read',
				data: {
					id: this.noticeInfo._id
				}
			});
		},
		getNoticeDetails() {
			uni.showLoading({
				title: '数据加载中...'
			});
			uniCloud
				.callFunction({
					name: 'get_notice_rowDetails',
					data: {
						_id: this.noticeInfo._id
					}
				})
				.then((res) => {
					this.noticeInfo.info = res.result.data[0].info;
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss">
.main {
	width: 750rpx;
	padding: 0 15rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.noticeImg {
		height: 400rpx;
		padding: 20rpx 0;
		image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}
	}

	.noticeTitle {
		box-sizing: border-box;
		height: 50rpx;
		color: #f3a73f;
		margin: 10rpx 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: bold;
		font-size: 35rpx;
	}

	.noticeInfo {
		font-size: 32rpx;
		line-height: 64rpx;
		text-indent: 64rpx;
	}

	.noticeDate {
		border-bottom: 1rpx solid #f4f4f5;
		box-sizing: border-box;
		color: #82848a;
		padding: 20rpx 0;
		font-size: 25rpx;
		display: flex;
		justify-content: space-between;
		.read_likeBox {
			display: flex;
			align-items: center;
			justify-content: center;
			.u-transition {
				margin-right: 20rpx;
			}
		}

		.dateBox {
			display: flex;
			align-items: center;
		}
	}

	.likeBox {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 100rpx 0;
		.iconAnimation {
			transition: transform 0.3s ease-in-out;
			&.bounce {
				animation: bounce 1s 1;
			}
			@keyframes bounce {
				0%,
				100% {
					transform: translateY(0);
				}
				50% {
					transform: translateY(-5px);
				}
			}
		}
		.text {
			font-size: 20rpx;
			color: #82848a;
		}
	}
}
</style>
